import { Menu, Dropdown, Badge, Layout, Spin, Select } from 'antd';
import { NavLink, useLocation, IRouteComponentProps } from 'umi'
import styles from "./teacherLayouts.less"
import { observer } from 'mobx-react-lite'
// import useStore from '@/context/useStore'
import { teacherBlanList, teacherLogin } from '@/services'
import React, { FC, useEffect, useState } from 'react';
import { UserOutlined, MenuUnfoldOutlined, PoweroffOutlined, BellOutlined } from '@ant-design/icons'
import { useIntl } from 'umi';
import { getLocale, setLocale } from 'umi'
import BreadCrumbs from '../components/BreadCrumbs'
const { Header, Footer, Content } = Layout;
const practiceMenu = <Menu style={{ width: '150px', minHeight: '135px',zIndex:-1}}>
  <Menu.Item key={1} style={{height:'42px' }} >
    <NavLink style={{    fontSize:'15px'}} to="/teachers/planList">计划</NavLink>
  </Menu.Item>
  <Menu.Item key={2} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/viewPlan">进度</NavLink>
  </Menu.Item>
  <Menu.Item key={3} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/defence">答辩</NavLink>
  </Menu.Item>
  <Menu.Item key={4} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/planListManage">计划(管理)</NavLink>
  </Menu.Item>
</Menu>
const interviewMenu = <Menu style={{ width: '150px', minHeight: '135px',zIndex:-1 }}>
  <Menu.Item key={1} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/interviewList">面试计划</NavLink>
  </Menu.Item>
  <Menu.Item key={2} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/interviewManage">面试计划管理</NavLink>
  </Menu.Item>
  <Menu.Item key={3} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/rankList">面试计划排行榜</NavLink>
  </Menu.Item>
</Menu>
const questionMenu = <Menu style={{ width: '150px', minHeight: '90px',zIndex:-1 }}>
  <Menu.Item key={1} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/questionDetail">问答列表</NavLink>
  </Menu.Item>
  <Menu.Item key={2} style={{height:'42px'}}>
    <NavLink style={{    fontSize:'15px'}} to="/teachers/questionHandle">问答管理</NavLink>
  </Menu.Item>
</Menu>
const Daimenu = <Menu style={{ width: '400px', minHeight: '120px', backgroundColor: 'none !important',zIndex:-1 }}>
  <Menu.Item key={1} style={{
    width: '100%', height: '60px', borderBottom: '1px solid #ccc',
    display: 'flex', alignItems: 'center', fontSize: '16px', fontWeight: 'bold',zIndex: 100
  }}>
    <span style={{
     marginLeft:'-8px', background: 'white', zIndex: 1000, width: '400px', height: '59px', 
     display: 'inline-block', padding: '5px 17px', lineHeight: '50px'}}>待办事项</span>
  </Menu.Item>
  <Menu.Item key={2} style={{
    width: '100%', height: '45px', display: 'flex',
    alignItems: 'center', justifyContent: 'center',
  }}>
    <NavLink to='/teachers/needHandle'><h3 style={{ margin: '0px', padding: '0px' }}>查看更多</h3></NavLink>
  </Menu.Item>
</Menu>
const Mymenu = <Menu style={{ width: '150px', height: '135px' ,zIndex:-1 }}>
  <Menu.Item key={1} style={{height:'42px'}}>
    <NavLink to="/teachers/teacherPersonCenter" style={{ width: '100%', height: '42px', margin: 0, padding: 0 }}>
      <p style={{
        width: '100%', height: '100%', padding: '0px 10px', margin: '0px', display: 'flex',
        alignItems: 'center', fontSize: '15px'
      }}><UserOutlined />&nbsp;&nbsp;个人中心</p>
    </NavLink>
  </Menu.Item>
  <Menu.Item key={2} style={{height:'42px'}}>
    <NavLink to="/teachers/needHandle" style={{ width: '100%', height: '42px', margin: 0, padding: 0 }}>
      <p style={{
        width: '100%', height: '100%', padding: '0px 10px', margin: '0px', display: 'flex',
        alignItems: 'center', fontSize: '15px'
      }}><MenuUnfoldOutlined />&nbsp;&nbsp;我的待办</p>
    </NavLink>
  </Menu.Item>
  <Menu.Item key={3} style={{height:'42px'}}>
    <NavLink to="/login" style={{ width: '100%', height: '42px', margin: 0, padding: 0 }}>
      <p style={{
        width: '100%', height: '100%', padding: '0px 10px', margin: '0px', display: 'flex',
        alignItems: 'center', fontSize: '15px'
      }}><PoweroffOutlined />&nbsp;&nbsp;退出</p>
    </NavLink>
  </Menu.Item>
</Menu>


const TearcherLayout: FC<IRouteComponentProps> = (props,history) => {
  // const { global } = useStore()
  const intl = useIntl();
  // console.log();

  const match = useLocation()
  // console.log('match', match);


  let [teacherlogin, setteacherlogin] = useState('')
  let [teacherblanlist, setteacherblanlist] = useState('')
  const [images, setimages] = useState('')    // 头像
  const [username, setusername] = useState('')//账号名
  const [blanlist, setblanlist] = useState('')//代办数量
  useEffect(() => {
    teacherLogin().then(res => {
      if (res.code == 200) {
        setteacherlogin(res)
        setimages(res.user.avatar)    // 头像
        setusername(res.user.userName)//账号名
      }
    })
  }, [])
  useEffect(() => {
    teacherBlanList().then(res => {
      if (res.code == 200) {
        setteacherblanlist(res)
        setblanlist(res.rows.length)
      }
    })
  }, [])
  // console.log(props.children.props)
  // console.log(props.children.props.location.pathname)
  return <Layout>
    <Header className={styles.header}>

      <div className={styles.header_div} >
        <div className={styles.header_div_title}>
          <img src="http://111.203.59.61:8060/static/img/w_bw.172a76e5.png" alt="" />
          <div className={styles.header_div_titles}>
            <span className={styles.header_div_titles_span}><NavLink to="/teachers/postSkill">
              {intl.formatMessage({
                id:'header.station'
              })}
            </NavLink></span>
            <span className={styles.header_div_titles_span}><NavLink to="/teachers/proManagement">
            {intl.formatMessage({
                id:'header.stations'
              })}
            </NavLink></span>
            <Dropdown overlay={practiceMenu} placement="bottomCenter"><span className={styles.header_div_titles_spans} > {intl.formatMessage({
                id:'header.stationsw'
              })}</span></Dropdown>
            <Dropdown overlay={interviewMenu} placement="bottomCenter" ><span className={styles.header_div_titles_spans} > {intl.formatMessage({
                id:'header.stationsww'
              })}</span></Dropdown>
            <Dropdown overlay={questionMenu} placement="bottomCenter" >
              <span className={styles.header_div_titles_spans} > {intl.formatMessage({
                id:'header.stationswww'
              })}</span>
            </Dropdown>
            <span style={{width:'80px',height:'60px'}}>
              <Select value={getLocale()} onChange={value => setLocale(value, false)} 
              style={{margin:0,padding:0}}>
                <Select.Option value='en-US' style={{backgroundColor:'none !important' ,border:'none !important'}}>English</Select.Option>
                <Select.Option value='zh-CN' style={{color:'black'}}>中文</Select.Option>
              </Select>
            </span>
          </div>
        </div>
        <div className={styles.header_div_my}>
          <div className={styles.header_div_my_div1}>
            <Dropdown overlay={Daimenu} placement="bottomRight" arrow={true}>
              <Badge count={blanlist}>
                <BellOutlined style={{ width: '30px', height: '30px', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '22px' }} />
              </Badge>
            </Dropdown>
          </div>
          <div className={styles.header_div_my_div2}>
            <Dropdown overlay={Mymenu} placement="bottomLeft" arrow={true}>
              <a className={styles.ant_dropdown_img}>
                <img className={styles.header_div_my_div1_img}
                  src={'http://111.203.59.61:8060' + images} alt="" />
              </a>
            </Dropdown>
          </div>
          <div className={styles.header_div_my_div3}>{username}</div>
        </div>
      </div>

    </Header>
    <div  className={styles.totaltitle_teacher}>
      <BreadCrumbs />
    </div>
    <Content>{props.children}</Content>

    <Footer style={{ width: '100%', height: '225px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: 'rgb(53,61,83)', marginTop: '20px', padding: '0' }}>
      <div className={styles.bw_bottom_div}>
        <div className={styles.bw_bottom_div_tou}>
          <div className={styles.bw_bottom}>
            <div className={styles.b_b_detail}>
              <div className={styles.b_b_left}>
                <div className={styles.bw_img}>
                  <img src="http://111.203.59.61:8060/static/img/bottom_logo.c8aa9859.png" alt="" />
                </div>
                <div className={styles.b_w_tel}>
                  400-008-0987
                </div>
              </div>
              <div className={styles.b_b_middle}>
                <div className={styles.middle}>
                  <div className={styles.middle_title}>
                    走进八维
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/about.html">
                      集团概况
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/news/index.html">
                      八维动态
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/lead.html">
                      领导关怀
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/honour.html">
                      企业荣誉
                    </a>
                  </div>
                </div>
                <div className={styles.middle}>
                  <div className={styles.middle_title}>
                    八维文化
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/culture.html">
                      八维理念
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/spirit.html">
                      八维精神
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/dak.html">
                      文化驿站
                    </a>
                  </div>
                </div>
                <div className={styles.middle}>
                  <div className={styles.middle_title}>
                    社会责任
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/duty/public.html">
                      社会公益
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/duty/great.html">
                      大善之举
                    </a>
                  </div>
                </div>
                <div className={styles.middle}>
                  <div className={styles.middle_title} >
                    联系我们
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/partners.html">
                      业务合作
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/sign_up.html">
                      咨询报名
                    </a>
                  </div>
                  <div className={styles.href_a}>
                    <a href="http://bwie.cn/bwie/concact.html">
                      联系方式
                    </a>
                  </div>
                </div>
              </div>
              <div className={styles.b_b_right}>
                <img src="http://111.203.59.61:8060/static/img/wechat.e60a83ec.png" alt="" />
                <div className={styles.wechat_text}>
                  八维微信公众号
                </div>
              </div>
            </div>

          </div>
        </div>
        <div className={styles.b_b_sign}>
          京公网安备 11010802031438号  Copyright 2020. 八维教育版权所有 | 京ICP备12008262号-12
        </div>
      </div>
    </Footer>
  </Layout>
}


export default observer(TearcherLayout);

